<template>
	<view>
		<view class="main" :style="'opacity: '+(status==1?'1':'0.2')+';'" @click="onClick">
			<view class="flexView" style="justify-content: space-between;">
				<view class="flexView">
					<image class="image" mode="aspectFill" :src="status==1?image:closeSrc"></image>
					<view class="info">
						<view class="shopName" v-text="shopName"></view>
						<view class="score" v-text="'评分:'+score.toFixed(1)"></view>
						<view class="totCnt" v-text="'月销:'+totCnt"></view>
					</view>
				</view>
				<view class="iconView">
					<view v-if="totCnt>=10" class="flexView">
						<image class="icon" mode="aspectFit" :src="hotSrc"></image>
						<label class="redFont">火爆</label>
					</view>
					<view v-if="score>=4.5" class="flexView">
						<image class="icon" mode="aspectFit" :src="goodSrc"></image>
						<label class="redFont">高分</label>
					</view>
					<view v-if="discount==1" class="flexView">
						<image class="icon" mode="aspectFit" :src="discountSrc"></image>
						<label class="redFont">折扣</label>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			shopId:{
				type:String,
				default:''
			},
			shopName:{
				type:String,
				default:''
			},
			image:{
				type:String,
				default:'#'
			},
			status:{
				type:Number,
				default:0
			},
			totCnt:{
				type:Number,
				default:0
			},
			score:{
				type:Number,
				default:0.0
			},
			discount:{
				type:Number,
				default:0
			}
		},
		data(){
			return{
				hotSrc:this.myConfig.staticUrl+'/hot.png',
				goodSrc:this.myConfig.staticUrl+'/good.png',
				discountSrc:this.myConfig.staticUrl+'/discount.png',
				closeSrc:this.myConfig.staticUrl+'/close.png'
			}
		},
		methods:{
			//点击
			onClick(){
				const that=this;
				if(that.status==0){
					uni.showToast({
						title:'商家已经休息啦',
						icon:'none',
						duration:1200
					});
					return ;
				}
				uni.navigateTo({
					url:'/pages/shop/shop?'+'shopId='+that.shopId
				});
			}
		}
	}
</script>

<style scoped>
	.main{
		padding: 10rpx 50rpx;
		background-color: #f8f8f8;
	}
	.flexView{
		display: flex;
		align-items:center;
	}
	.image{
		width: 180rpx;
		height: 180rpx;
	}
	.info{
		padding: 0rpx 20rpx;
		color: #555555;
	}
	.icon{
		width: 30rpx;
		height: 30rpx;
	}
	.iconView{
		display: flex;
		flex-direction: column;
	}
	.redFont{
		padding-top: 5rpx;
		font-size: 20rpx;
		color: #DD524D;
		font-weight: 800;
	}
	.shopName{
		font-size: 30rpx;
		font-weight: 800;
	}
	.score{
		color: #F0AD4E;
	}
	.totCnt{
		font-size: 25rpx;
	}
</style>
